<script setup lang="ts">
import { computed, reactive, watch } from 'vue';
import { $t } from '@/locales';
import { genderOptions, enableStatusRecord } from '@/constants/business';

defineOptions({
  name: 'ShowDetailModal'
});

interface Props {
  /** the detail of row data */
  rowData?: Api.SystemManage.User | null;
}

const props = defineProps<Props>();

const visible = defineModel<boolean>('visible', {
  default: false
});

function closeModal() {
  visible.value = false;
}

type Model = {
  userName: string;
  displayName: string;
  loginName: string;
  nickName: string;
  email: string;
  address: string;
  age: string;
  gender: Api.SystemManage.gender | null;
  idNumber: string;
  birthday: string;
  telephone: string;
  status: Api.Common.EnableStatus;
  userRoleName: string;
  userDeptName: string;
  userPostName: string;
};

const model: Model = reactive(createDefaultModel());

function createDefaultModel(): Model {
  return {
    userName: '',
    displayName: '',
    loginName: '',
    nickName: '',
    address: '',
    age: '',
    gender: null,
    email: '',
    idNumber: '',
    birthday: '',
    telephone: '',
    status: 1,
    userRoleName: '',
    userDeptName: '',
    userPostName: ''
  };
}

// 计算显示值
const displayValues = computed(() => {
  const genderOption = genderOptions.find(item => item.value === model.gender);

  return {
    gender: genderOption ? $t(genderOption.label) : '-',
    status: model.status ? $t(enableStatusRecord[model.status]) : '-',
    userRole: model.userRoleName || '-',
    userDept: model.userDeptName || '-',
    userPost: model.userPostName || '-'
  };
});

function handleInitModel() {
  if (props.rowData) {
    // 直接从 rowData 中获取数据
    const data = props.rowData as any;

    Object.assign(model, {
      userName: data.userName || '',
      displayName: data.displayName || '',
      loginName: data.loginName || '',
      nickName: data.nickName || '',
      email: data.email || '',
      address: data.address || '',
      age: data.age || '',
      gender: data.gender || null,
      idNumber: data.idNumber || '',
      birthday: data.birthday || '',
      telephone: data.telephone || '',
      status: data.status || 1,
      // 直接使用名称字段，假设后端返回的是名称而不是ID
      userRoleName: data.userRoleName || data.roleName || '',
      userDeptName: data.userDeptName || data.deptName || '',
      userPostName: data.userPostName || data.postName || ''
    });
  }
}

watch(visible, () => {
  if (visible.value) {
    handleInitModel();
  }
});
</script>

<template>
  <NModal
    v-model:show="visible"
    :title="$t('page.manage.user.userDetail')"
    preset="dialog"
    style="width: 900px; max-width: 95vw; height: 60vh"
    @close="closeModal"
  >
    <NScrollbar class="h-600px pr-20px">
      <NForm ref="formRef" :model="model" label-placement="left" :label-width="100" disabled>
        <NGrid responsive="screen" item-responsive>
          <NFormItemGi span="24 m:12" :label="$t('page.manage.user.userName')" path="userName">
            <NInput :value="model.userName || '-'" readonly />
          </NFormItemGi>
          <NFormItemGi span="24 m:12" :label="$t('page.manage.user.displayName')" path="displayName">
            <NInput :value="model.displayName || '-'" readonly />
          </NFormItemGi>
          <NFormItemGi span="24 m:12" :label="$t('page.manage.user.nickName')" path="nickName">
            <NInput :value="model.nickName || '-'" readonly />
          </NFormItemGi>
          <NFormItemGi span="24 m:12" :label="$t('page.manage.user.loginName')" path="loginName">
            <NInput :value="model.loginName || '-'" readonly />
          </NFormItemGi>
          <NFormItemGi span="24 m:12" :label="$t('page.manage.user.gender')" path="gender">
            <NInput :value="displayValues.gender" readonly />
          </NFormItemGi>
          <NFormItemGi span="24 m:12" :label="$t('page.manage.user.status')" path="status">
            <NInput :value="displayValues.status" readonly />
          </NFormItemGi>
          <NFormItemGi span="24 m:12" :label="$t('page.manage.user.telephone')" path="telephone">
            <NInput :value="model.telephone || '-'" readonly />
          </NFormItemGi>
          <NFormItemGi span="24 m:12" :label="$t('page.manage.user.email')" path="email">
            <NInput :value="model.email || '-'" readonly />
          </NFormItemGi>
          <NFormItemGi span="24 m:12" :label="$t('page.manage.user.address')" path="address">
            <NInput :value="model.address || '-'" readonly />
          </NFormItemGi>
          <NFormItemGi span="24 m:12" :label="$t('page.manage.user.age')" path="age">
            <NInput :value="model.age || '-'" readonly />
          </NFormItemGi>
          <NFormItemGi span="24 m:12" :label="$t('page.manage.user.idNumber')" path="idNumber">
            <NInput :value="model.idNumber || '-'" readonly />
          </NFormItemGi>
          <NFormItemGi span="24 m:12" :label="$t('page.manage.user.birthday')" path="birthday">
            <NInput :value="model.birthday || '-'" readonly />
          </NFormItemGi>

          <!-- 新增的用户角色、所属部门及岗位信息 -->
          <NFormItemGi span="24 m:12" :label="$t('page.manage.user.userRole')" path="userRole">
            <NInput :value="displayValues.userRole" readonly />
          </NFormItemGi>
          <NFormItemGi span="24 m:12" :label="$t('page.manage.user.belongDept')" path="userDept">
            <NInput :value="displayValues.userDept" readonly />
          </NFormItemGi>
          <NFormItemGi span="24 m:12" :label="$t('page.manage.user.userPost')" path="userPost">
            <NInput :value="displayValues.userPost" readonly />
          </NFormItemGi>
        </NGrid>
      </NForm>
    </NScrollbar>
  </NModal>
</template>

<style scoped></style>
